<template>
  <div class="chooseMaterials">
    <el-button
      v-if="showBtn"
      plain
      type="single-number-filleted"
      style="margin-left: 10px"
      @click="dialogFormVisible = true"
      >选择</el-button
    >
    <el-dialog
      @opened="getList"
      width="914px"
      title="选择生产厂家/品牌"
      :visible.sync="dialogFormVisible"
      custom-class="sorting-code-number"
      :before-close="cancel"
    >
      <!-- <div class="el-dialog__body-bodys">
        <div class="bodys-right"> -->
      <div class="ccui-multifunctional-table-wrapper">
        <!-- 表格 -->
        <el-table
          max-height="447"
          :data="tableData"
          :row-class-name="tableRowClassName"
          style="width: 100%"
          highlight-current-row
          border
          @row-click="rowClick"
        >
          <el-table-column label width="35">
            <template slot-scope="{ row }">
              <el-radio
                :label="row.id"
                :disabled="row.currentAccumulatedunPaiedAmt === 0"
                v-model="radioSelect"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="manufacturerName"
            label="厂家名称"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div
                style="display:flex;align-items: center"
                v-if="scope.row.type === '其它'"
              >
                <div style="width:50px;">其它：</div>
                <el-input v-model="scope.row.manufacturerName" />
              </div>
              <div v-else>
                {{ scope.row.manufacturerName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="brandName"
            label="品牌名称"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div
                style="display:flex;align-items: center"
                v-if="scope.row.type === '其它'"
              >
                <div style="width:55px;">其它：</div>
                <el-input v-model="scope.row.brandName" />

                <i
                  v-if="scope.row.status === '加'"
                  class="status-icon el-icon-circle-plus-outline"
                  style="font-size:20px"
                  @click="addCell(scope.row.status)"
                ></i>
                <i
                  v-else
                  class="status-icon el-icon-remove-outline"
                  style="font-size:20px"
                  @click="addCell(scope.row.status)"
                ></i>
              </div>
              <div v-else>
                {{ scope.row.brandName }}
              </div>
            </template>
          </el-table-column>
          <template v-if="ids.length > 1" slot="empty">
            <span style="color:red;">没有相同生产厂家/品牌，请重新选择</span>
          </template>
        </el-table>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="default-mini" @click="cancel"
          >取 消</el-button
        >
        <el-button size="mini" type="primary-font-mini" @click="confirm"
          >确 定</el-button
        >
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import { throttle } from "@/basa/utils";
import { getManufacturerBrand } from "../api/index.js";
import { generateUUID } from "@/basa/utils";
export default {
  props: {
    allSet: {
      type: String,
      default: ""
    },
    // 查交集时用
    matLessList: {
      type: Array,
      default: () => []
    },
    // 清单关联id
    typeList: {
      type: Number
    },
    // 订单关联id
    orderBillId: {
      type: Number
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    setContractList: {
      type: Array,
      default: () => []
    },
    setTableList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      filter: {},
      isShow: false,
      dialogFormVisible: false,
      tableData: [],
      formData: {
        matName: "",
        matnum: "",
        pageNo: 1,
        pageSize: 10,
        catalogId: ""
      },
      total: 1000,
      materialsData: "", // 选择数据
      isTurnPage: false, //是否有翻页
      keyWord: "",
      // contractList: [
      //   { concId: "01", contractName: "钢材" },
      //   { concId: "02", contractName: "水泥" },
      //   { concId: "03", contractName: "沥青" },
      //   { concId: "99", contractName: "其它" }
      // ],
      listItemIndex: "99",
      radioSelect: "",
      temp: null,
      ids: [],
      id: null
    };
  },
  watch: {
    // 获取合同列表
    // typeList(newVal) {
    //   this.listItemIndex = newVal;
    // },
    // 获取结算单列表
    setTableList(newVal) {
      this.tableData = newVal;
    },
    matLessList(n) {
      this.ids = n;
    },
    typeList(n) {
      this.id = n;
    }
  },
  methods: {
    // 列表数据获取
    getList() {
      let obj = {};
      obj =
        this.ids.length > 0
          ? { matLessList: this.ids }
          : { concMatLessListId: this.id };
      getManufacturerBrand({
        ...obj,
        contractCode: this.$route.query.htCode
      }).then(res => {
        this.tableData = res.data.data;
      });
    },
    // 重置
    resetForm() {
      this.filter = "";
    },
    // 搜索
    search(filter) {
      this.filter = filter;
      this.getList();
    },
    // 表格增加行
    addCell(status) {
      if (status === "加") {
        this.tableData.unshift({
          id: generateUUID(),
          manufacturerName: "其它",
          brandName: "其它",
          type: "其它",
          add: "减"
        });
      } else {
        this.tableData.shift();
      }
    },

    // 切换左侧合同
    handleClick(row) {
      this.listItemIndex = row.concId;
      if (row.concId === "99") {
        this.tableData = [
          {
            manufacturerName: "其它",
            brandName: "其它",
            type: "其它",
            status: "加"
          }
        ];
        return;
      }
      this.getList(row.concId);
    },
    rowClick(row) {
      if (row.currentAccumulatedunPaiedAmt === 0) return;
      this.radioSelect = row.id;
      this.materialsData = row;
      this.confirm();
    },
    // 每页条数发生改变
    handleSizeChange(val) {
      this.pageNoCode = 1;
      this.getStatementList();
    },
    // 当前页发生改变
    handleCurrentChange(val) {
      this.formData.pageNo = val;
      this.getStatementList();
    },
    // 上一页
    handlePrev() {
      --this.pageNoCode;
      this.getStatementList();
    },
    // 下一页
    handleNext() {
      ++this.pageNoCode;
      this.getStatementList();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.handleReset();
    },
    confirm() {
      if (!this.materialsData) {
        return this.$message({
          message: "未选择数据，请编辑后保存",
          type: "error",
          showClose: true,
          ccuiCustom: true
        });
      }

      this.$emit("ok", [this.materialsData]);
      // this.matLessList.length > 1
      //   ? this.$emit("ok", [this.materialsData])
      //   : this.$emit("ok", [this.materialsData, "批量"]);

      this.handleReset();
      this.dialogFormVisible = false;
    },
    handleReset() {
      this.listItemIndex = 1;
      this.materialsData = "";
      this.radioSelect = "";
      this.tableData = [];
      this.$emit("reset");
    },
    handleSelect(val) {
      this.keyWord = val.contractName;
      this.listItemIndex = val.concId;
      this.$emit("autocompleteSelect", val);
    },
    querySearchAsync: throttle(function(queryString, cb) {
      this.$emit("querySearchAsync", queryString, cb);
    }, 1000),
    // 为禁用行添加样式
    tableRowClassName({ row, rowIndex }) {
      if (row.currentAccumulatedunPaiedAmt === 0) {
        return "prohibit";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.chooseMaterials {
  display: inline-block;
}
/deep/ .sorting-code-number {
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-dialog__body {
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    .el-dialog__body-bodys {
      height: 100%;
      .bodys-left {
        overflow-x: hidden;
        box-sizing: border-box;
        width: 245px;
        .el-input {
          width: 205px;
        }
        .bodys-left-list {
          padding: 20px;
          .list-item {
            display: flex;
            align-items: center;
            padding-left: 10px;
            padding-right: 5px;
            line-height: 35px;
            font-size: 13px;
            cursor: pointer;
            transition: 0.2s;
            &:hover,
            &.active {
              background-color: #e5f4ff;
              color: #0089ef;
            }
            .item-text {
              padding: 0 10px;
            }
          }
        }
      }
      .bodys-right {
        .el-table {
          .el-radio__label {
            padding-left: 12px;
          }
          .prohibit {
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
.autocomplete-item {
  display: flex;
  align-items: center;
  span {
    padding: 0 10px;
  }
}
.status-icon:hover {
  color: #0089ef;
}
/deep/.el-radio__label {
  display: none;
}
</style>
